<script setup>
import {ref, onMounted, reactive, onUpdated, defineProps} from "vue";
import {useRouter, useRoute} from "vue-router";
import {getshopa, shishou, getding, huoqus} from "../../api/index";

import echarts from "./components/echjarts.vue";
let shouya = ref(false);
const prop = defineProps({
  msg: String,
  bac: {default: false},
});

const router = useRouter();
const chdata = reactive({d: {}, ding: {}});
const zongjia = ref();
// 获取商品订购
const day = reactive({days: 14});

const dinggouz = (e) => {
  day.days = e;
  dinggou();
};
const dinggou = async () => {
  const a = await getshopa(day);
  chdata.d = a.data;
  let c = 0;

  chdata.d.forEach((element) => {
    c = c + Number(element.orderAmount);
  });
  console.log(c);
  zongjia.value = c.toFixed(2);
};
const percentageo = ref(0);
const percentaget = ref(0);
const percentages = ref(0);
const percentagef = ref(0);
const geidan = async () => {
  const {data} = await getding();
  chdata.ding = data;

  // chdata.ding = {
  //   awaiting_packaging: 10,
  //   delivering: 34,
  //   awaiting_approve: 4,
  //   posting_received: 19,
  // };
  let a =
    Number(chdata.ding.awaiting_packaging) +
    Number(chdata.ding.delivering) +
    Number(chdata.ding.awaiting_approve) +
    Number(chdata.ding.posting_received);
  percentageo.value = (chdata.ding.awaiting_packaging / a) * 100;

  percentaget.value = (chdata.ding.delivering / a) * 100;
  percentagef.value = (chdata.ding.posting_received / a) * 100;
  percentages.value = (chdata.ding.awaiting_approve / a) * 100;
};
// 验证是否授权
const yanshou = async () => {
  const a = await shishou();
  shouya.value = a.data;

  if (!shouya.value) dialogVisible.value = true;
  else {
    geidan();
    dinggou();
  }
};
yanshou();

const dialogVisible = ref(false);

const shouqanq = () => {
  dialogVisible.value = false;
  router.push({
    name: "service",
  });
};

const customColor = ref("#409eff");

const customColors = [
  {color: "#f56c6c", percentage: 20},
  {color: "#e6a23c", percentage: 40},
  {color: "#5cb87a", percentage: 60},
  {color: "#1989fa", percentage: 80},
  {color: "#6f7ad3", percentage: 100},
];
const formato = (percentage) => chdata.ding.awaiting_packaging;
const formatt = (percentage) => chdata.ding.delivering;
const formatf = (percentage) => chdata.ding.posting_received;
const formats = (percentage) => chdata.ding.awaiting_approve;
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="提醒"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    width="500"
    :before-close="handleClose"
  >
    <span>您还未授权店铺！</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          style="color: #fff; margin-bottom: 20px; font-size: 12px"
          type="primary"
          color="rgb(78 168 185)"
          round
          @click="shouqanq"
        >
          前去授权
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div
    class="app-container home"
    style="background-color: #fff; border-radius: 10px; margin: 0 10px"
  >
    <div style="width: 70%; padding: 30px; margin: auto">
      <div sty>
        <p style="font-size: 20px; font-weight: 700">订购商品数量</p>
        <div style="border-radius: 10px; margin-top: 10px">
          <div style="background-color: #fff; border-radius: 10">
            <div
              class="sds"
              style="display: flex; width: 100%; justify-content: flex-end"
            >
              <div @click="dinggouz(1)" style="margin: 0 5px; cursor: pointer">
                天
              </div>
              <div @click="dinggouz(6)" style="margin: 0 5px; cursor: pointer">
                周
              </div>
              <div @click="dinggouz(29)" style="margin: 0 5px; cursor: pointer">
                月
              </div>
            </div>
            <echarts
              v-if="zongjia !== null"
              :chdata="chdata.d"
              :cont="zongjia"
            />
          </div>

          <div style="padding: 30px; font-size: 22px; font-weight: 700">
            <p style="font-size: 20px; font-weight: 700">最近14天</p>
            <div class="demo-progress">
              <span style="font-size: 14px">等待配货</span>
              <el-progress
                :format="formato"
                :percentage="percentageo"
                color="#e6a23c"
              />
              <span style="font-size: 14px">等待发运</span>

              <el-progress
                :percentage="percentaget"
                color="rgb(64, 158, 255)"
                :format="formatt"
              />
              <span style="font-size: 14px">运输中</span>

              <el-progress
                :percentage="percentages"
                color="rgb(44 133 11)"
                :format="formats"
              />
              <span style="font-size: 14px">已签收</span>
              <el-progress
                :format="formatf"
                :percentage="percentagef"
                color="#f56c6c"
              />
            </div>
          </div>
          <div style="padding: 30px; font-size: 22px; font-weight: 700">
            <div>
              <p style="font-size: 20px; font-weight: 700">待办事项</p>
              <el-card
                @click="
                  router.push({
                    name: 'order',
                  })
                "
                style="max-width: 100%; margin-top: 10px"
              >
                <div>
                  <p
                    style="
                      font-size: 16px;
                      font-weight: 700;
                      margin-bottom: 5px;
                    "
                  >
                    订单
                  </p>
                  <ul class="bx">
                    <li>
                      <span style="color: rgb(78 168 185)">
                        {{ chdata.ding.awaiting_packaging }}</span
                      >
                      <span>等待备货</span>
                    </li>
                    <li>
                      <span style="color: rgb(78 168 185)">
                        {{ chdata.ding.delivering }}
                      </span>
                      <span>等待发运</span>
                    </li>
                    <li>
                      <span style="color: rgb(78 168 185)">
                        {{ chdata.ding.awaiting_approve }}</span
                      >
                      <span>运输中</span>
                    </li>
                    <li>
                      <span style="color: rgb(78 168 185)">
                        {{ chdata.ding.posting_received }}
                      </span>
                      <span>已签收</span>
                    </li>
                  </ul>
                </div>
              </el-card>
            </div>
            <!-- <p style="width: 50%">
              <span> 已订购 </span>
              <span style="font-size: 18px; color: #999"> &nbsp;3.3434</span>

              <br />
              <span
                style="display: inline-block; margin-top: 10px; font-size: 30px"
                >0件</span
              >
            </p> -->
            <!-- <p style="width: 50%">
              <span> 已交付</span>
              <span style="font-size: 18px; color: #999">3.3434</span>

              <br />
              <span
                style="display: inline-block; margin-top: 10px; font-size: 30px"
                >0件</span
              >
            </p> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script></script>
<style lang="scss" scoped>
.bx {
  display: flex;
  justify-content: space-between;
  li {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 24%;

    border-radius: 10px;
    height: 100px;
    background: #f6f7fa;
  }
}
.header {
  position: absolute;
  /* background-color:rgba(255,255,255,.5); */
  /* position: absolute;  */
  width: 100%;
  z-index: 99999;
  display: flex;
  justify-content: flex-end;
  /* flex-direction: row-reverse; */
  padding: 0px 30px;
  /* background-color: rgb(0, 0, 0,.2); */
}
.lianright {
  width: 60%;
  height: 400px;
  background-color: red;
}
.lianxiang {
  margin-top: 30px;
}
.lianxiang li {
  font-size: 18px;
  line-height: 50px;
  color: rgb(102, 102, 102);
}
.fandh {
  font-size: 24px;
  font-weight: 700;
  color: rgb(127, 127, 127);
}
.sdsda {
  font-size: 16px !important;
}
.lianty {
  text-align: center;
  font: 15px/140% Arial, "宋体", Helvetica, sans-serif, Verdana;
  color: #5a5a5a;
}
.boleft {
  width: 40%;
  height: 400px;
  padding: 20px;
}
.lianxi {
  display: flex;

  width: 1200px;
  margin: auto;
  margin-top: 20px;
  border: 1px solid rgb(243, 243, 243);

  background-color: rgb(251, 251, 251);
}
.bm-view {
  width: 100%;

  height: 100%;
}
:deep(.el-tabs__item) {
  font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__item.is-active) {
  color: rgb(78 168 185);
}
:deep(.el-tabs__active-bar) {
  background-color: rgb(78 168 185) !important;
}
:deep(.el-tabs__item:hover) {
  color: rgb(78 168 185);
}

.xiangc {
  background-color: rgb(251, 251, 251);
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}
.xiangc li {
  cursor: pointer;
  width: 20%;
  height: 200px;
}
.xiangc li img {
  width: 100%;
  height: 80%;
  transition: all 0.2s linear;
}
:deep(.el-tabs__item) {
  font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__item.is-active) {
  color: rgb(78 168 185);
}
:deep(.el-tabs__active-bar) {
  background-color: rgb(78 168 185) !important;
}
:deep(.el-tabs__item:hover) {
  color: rgb(78 168 185);
}
/* .xiangc li:hover{
  img{
    transition: all .2s linear;
   transform: scale(1.1);
  }
} */

.xiangc li p {
  text-align: center;
  font-size: 16px;
}

.clace {
  padding: 30px;
  width: 1200px;
  margin: auto;
  /* width: 200px;
height: 200px; */
  /* background-color: red; */
}
.serch {
  display: flex;
  align-items: center;
  width: 180px;
}
.header {
  position: absolute;
  /* background-color:rgba(255,255,255,.5); */
  /* position: absolute;  */
  width: 100%;
  z-index: 99999;
  display: flex;
  justify-content: flex-end;
  /* flex-direction: row-reverse; */
  padding: 0px 30px;
  /* background-color: rgb(0, 0, 0,.2); */
}
:deep(.el-sub-menu__title) {
  font-size: 16px;
  color: #fff !important;
}
.bannder {
  margin-left: 50px;

  width: 70%;
}
:deep(.el-menu) {
  background: rgba(0, 0, 0, 0);
}

:deep(.el-menu-item) {
  font-size: 16px;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover) {
  color: rgb(78 168 185) !important;
  background-color: rgba(0, 0, 0, 0.5);
}
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(
    .el-menu--horizontal .el-menu .el-menu-item,
    .el-menu--horizontal .el-menu .el-sub-menu__title
  ) {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
:deep(.el-menu-item:hover) {
  color: rgb(78 168 185) !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  color: rgb(78 168 185) !important;
}
.el-menu--horizontal.el-menu {
  border-bottom: 0;
}
.sds {
  div {
    &:hover {
      color: rgb(78 168 185);
    }
  }
}
</style>
